<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";
import HeadComp from "@/components/HeadComp.vue";
import { storeToRefs } from "pinia";
const userState = useUserStore();
const { loginInfo, getTenantName } = storeToRefs(userState);
</script>

<template>
  <div class="user">
    <HeadComp :name="loginInfo?.ssoUserName" />
    <div class="user-info">
      <div class="name">{{ loginInfo?.ssoUserName }}</div>
      <div class="info">{{ getTenantName }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user {
  background: #ffffff;
  padding: var(--padding-value);
  display: flex;
  &-info {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-left: 16px;
    .name {
      color: #222;
      font-size: var(--lg-font-size);
      font-weight: 500;
    }

    .info {
      color: #b2b2b6;
    }
  }
}
</style>
